<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue组件(可复用的模板)</title>
</head>
<body>
<div id="app">
    <abc v-for="item in items" v-bind:aa="item"></abc>

</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>
<script>
//定义一个vue组件名称是abc
Vue.component("abc",{
    props:['aa'],
    template:'<li>{{aa}}</li>'
});

var vm = new Vue({
    el:"#app",
    data:{
        items:["java","Linux","前端"]
    }
});
</script>
<!--
    用v-for遍历
    使用v-bind绑定组件aa和遍历的名称item
-->

</html>